import { Button } from 'antd';
import React, { useState, useEffect } from 'react'

function PersonnelQuantity(props: any) {
    const [echartsData, setechartsData] = useState({
        visitPeriod: [],
        visitNumber: []
    })
    const { chartData, setpersonnelDatas } = props
    const echarts = require('echarts');
    function getOption(chartData:any) {
        var myChart = echarts.init(document.getElementById('echartsId'));
        let option = {
            xAxis: {
                type: 'category',
                data: chartData.visitPeriod
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: chartData.visitNumber,
                type: 'line'
            }]
        };
        myChart.setOption(option)
    }
    useEffect(() => {
        setechartsData(chartData)
        getOption(chartData);
        // console.log(chartData)
    }, [chartData]);



   


    return (
        <div className="PersonnelQuantity">
            <div className="titleName">
                <div className="titleName">人员总量</div>
                <p>
                    <Button size="small" onClick={() => setpersonnelDatas("totalPersonCurveVosByDay")}>今日</Button>
                    <Button size="small" onClick={() => setpersonnelDatas("totalPersonCurveVosByWeek")}>近7天</Button>
                    <Button size="small" onClick={() => setpersonnelDatas("totalPersonCurveVosByMonth")}>近30天</Button>
                </p>
            </div>
            <div id="echartsId" style={{ height: "350px" }}> </div>



        </div>

    )
}

export default PersonnelQuantity
